<!DOCTYPE html>
<html>
<head>
   <title>CSS Animations - animation-direction and timing functions</title>
   <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
   <link rel="help" href="http://dev.w3.org/csswg/css3-animations/#the-animation-direction-property-">
   <meta name="flags" content="dom">
   <meta name="assert" content="When an animation is played in reverse the
   timing functions are also reversed">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <style type="text/css">
      @keyframes move {
         0% {
            left: 0px;
            animation-timing-function: step-end;
         }
         33% {
            left: 100px;
         }
         100% {
            left: 300px;
         }
      }
      div {
         width: 100px;
         height: 100px;
         background: blue;
         position: relative;
         animation-duration: 2s;
         animation-iteration-count: 2;
         animation-direction: alternate;
         animation-timing-function: steps(2, start);
      }
      div + div {
         background: gray;
         border-right: 100px solid black;
         left: 200px;
         top: -100px;
         z-index: -1;
      }
      .test {
         animation-name: move;
      }
   </style>
   <script type="text/javascript">
      setup({explicit_done:true});
      onload = function() {
         var testName = document.querySelector('title').firstChild.data;
         var div = document.querySelector('div');
         var log = document.querySelectorAll('p')[1].firstChild;
         var style = getComputedStyle(div, null);
         var expected = ['0px','200px','300px','300px','300px','200px','0px'];
         var i = 0;
         var passed = undefined;
         var interval = setInterval(function() {
            passed = (passed !== false) && (style.left == expected[i]);
            i++;
            if (!(passed && i < expected.length)) {
               clearInterval(interval);
               test(function(){assert_true(passed);}, testName); done();
               log.data = (passed ? 'PASS if the animation occurred.' : 'FAIL');
            }
         }, 500);
         div.className = 'test';
      }
   </script>
   <style>iframe{display:none}</style>
</head>
<body>
   <p>The blue square below should change position at regular intervals,
   covering the other squares as follows: neither, gray, black, black, gray,
   neither.</p>
   <p>Testing...</p>
   <div></div>
   <div></div>
</body>
</html>
